<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>title</title>
  <!--  <link rel="stylesheet" type="text/css" href="../css/aui.css" />   -->
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" type="text/css" href="../css/style.css"/>
    <link rel="stylesheet" href="../css/zhibo.css">
    <style>

      /*新加空提示信息*/

      .m-noRecord {
        padding: .395rem 0 0;
        text-align: center;
    }

    .m-noRecord .c-icon-noRecord {
        background: url(../image/app/Loading2.gif) no-repeat;
        background-size: cover;
      width: 15rem;
      height: 10rem;
      /* margin: .485rem auto 0; */
      margin: 0 auto;
    }
    .m-noRecord .c-info {
        background: linear-gradient(to right, #ffd74c, #c7752e);
        -webkit-background-clip: text;
        color: transparent;
        /* color: #cecfce;  */
        line-height: 4rem;
        padding: .25rem 0;
        font-size: .8rem;
    }

    </style>

</head>

<body>







    <div class="aui-tab" style=" background: #fff; ">
            <div class="tab-panel">
                <div class="tab-panel-item tab-active">
                    <div class="tab-item">
                        <a class="aui-flex b-line">
                            <div class="aui-flex-iphone">
                                <img src="../image/app/game.png" alt="">
                            </div>
                            <div class="aui-flex-box">
                              <p>
                                  <em class="aui-group-three" style=" font-size: 12px; "> 游戏在线直播</em>
                              </p>
                                <h3 style=" font-size: 10px; ">各类游戏 海量主播</h3>
                                <p>
                                    <em class="aui-group-one" style=" font-size: 12px; ">实时更新</em> <em class="aui-group-two" style=" font-size: 12px; ">知名主播</em>
                                </p>

                            </div>
                            <div class="aui-flex-support" style=" font-size: 12px; " onclick="baocuo()"  >报错</div>
                        </a>


                    </div>
                </div>


            </div>
        </div>







  <div class="wrap">
    <!-- 游戏 -->
    <div class="game-page-zhubo">

      <!-- 视频列表 -->
    <div class="game-list-wrap-zhubo" id="liveList">
      <ul class="clearfix" id="div_list">

        <!--加载提示-->
        <section class="m-noRecord"><div class="c-icon-noRecord"></div> <div class="c-info">奋力加载中...</div></section>
        <!--加载提示-->


      </ul>
    </div>
    <!-- 视频列表 end-->

    </div>
    <!-- 游戏 end-->
  </div>
</body>
<script type="text/x-dot-template" id="template">
{{~ it : value : index }}

/*
    <li onclick="openWin('{{= value. video }}')">
      <div class="video-mask-box">
        <img src="{{= value. img }}" alt="" class="game-pic">
      </div>
      <div class="til">{{= value. name }}</div>
      <div class="detail clearfix">
        <p class="anchor clearfix">
          <i class="icon-m icon-ic_man"></i><span>{{= value. nickname }}</span>
        </p>
      </div>
    </li>
*/
    <li>
      <div class="game-a" onclick="openWin('{{= value. video }}')">
        <img src="{{= value. img }}" alt="">
          <em class="aui-group-three" style=" font-size: 12px; "> {{= value. name }}</em>
        <p>
            <em class="aui-group-one" style=" font-size: 12px; ">主播：</em> <em class="aui-group-two" style=" font-size: 12px; ">{{= value. nickname }}</em>
        </p><br>
      </div>
    </li>


{{~}}
</script>
<script type="text/javascript" src="../script/api.js" ></script>
<script type="text/javascript" src="../script/doT.js"></script>
<script type="text/javascript">
  var api_url = localStorage.getItem('api_url');
  var i = 1;

  /////  初始化执行   S /////
  /////  apiready  一打开就执行的 函数

  apiready = function(){
    api.showProgress({
        title: '加载中...',
        modal: false
    });
    getList();

    api.addEventListener({
        name:'scrolltobottom',
        extra:{
            threshold:0
        }
    }, function(ret, err){
      showData();
    });

  }

/////  初始化执行   E /////


//////////////////////   获取游戏直播间列表  方法   getList    S //////////////////////
  function getList(){
    var div_list = $api.byId('div_list');
    var template = $api.byId('template');
    api.ajax({
        url: 'http://aikan.zhinenghudong.cn/api/gamezhibo.php',
        method: 'get',
        data: {
            values: {
                lx: 'hqzb',
                ys: i,
                id: api.pageParam.id
            }
        }
    },function(ret, err){
        if (ret) {
            //alert( JSON.stringify( ret ) );
            var pagefn = doT.template(template.text);
            div_list.innerHTML = pagefn(ret);
            api.hideProgress();
        } else {
          api.hideProgress();
            //alert( JSON.stringify( err ) );
        }
    });


  }
//////////////////////   获取游戏直播间列表  方法   getList    E //////////////////////

//////////////////////   ***  方法   showData    S //////////////////////
  function showData(){
    i = i+1;
    var div_list = $api.byId('div_list');
    var template = $api.byId('template');
    api.ajax({
        url: 'http://aikan.zhinenghudong.cn/api/gamezhibo.php',
        method: 'get',
        data: {
            values: {
              lx: 'hqzb',
              ys: i,
              id: api.pageParam.id
            }
        }
    },function(ret, err){
        if (ret) {
            //alert( JSON.stringify( ret ) );
            var pagefn = doT.template(template.text);
            div_list.innerHTML += pagefn(ret);
        } else {
            //alert( JSON.stringify( err ) );
        }
    });

  }
//////////////////////   ***  方法   showData    E //////////////////////


//////////////////////   打开直播间  方法         S //////////////////////
  function openWin(name){



    //网络连接判断S


                        api.ajax({
                            url: api_url+'/login/login/banben.html',
                            method: 'get'
                        },function(ret, err){
                            if (ret) {

                                         //网络正常   跳转





                                               /*
                                               api.showProgress({
                                                   title: '爱看影视超级VIP登陆中中',
                                                   modal: false
                                               });

                                         api.toast({
                                             msg: '加载中'
                                         });
                                         */

                                         var delay = 0;
                                         if(api.systemType != 'ios'){
                                             delay = 300;
                                         }
                                         api.openWin({
                                             name: 'game_play_win',
                                             url: 'game_play_win.html',
                                             bounces:false,
                                             delay: delay,
                                             slidBackEnabled:true,
                                             vScrollBarEnabled:false,
                                             pageParam:{video:'http://alhls.cdn.zhanqi.tv/zqlive/'+name+'.m3u8'}
                                         });


                            } else {

                                        //网络连接失败 进行提示
                                        NetworkConnectionFailurePrompt();

          }


      });
  //网络连接判断E



    }
//////////////////////   打开直播间  方法        E //////////////////////



//////////////////////    网络连接失败提示  方法  NetworkConnectionFailurePrompt   S  //////////////////////
    function NetworkConnectionFailurePrompt() {

                      /*无网络弹窗提示*/
                                var dialogBox = api.require('dialogBox');
                                dialogBox.alert({
                                    tapClose: false,  //描述：（可选项）是否点击遮罩层关闭该对话框  默认值：false
                                    texts: {
                                        content: '请检查网络是否顺畅',
                                        leftBtnTitle: '先不管',
                                        rightBtnTitle: '网络设置'
                                    },
                                    styles:{
                              bg: '#fff',            //（可选项）字符串类型；对话框整体背景配置，支持#、rgb、rgba、img；默认：#fff
                              corner: 10,             //（可选项）数字类型；对话框背景圆角大小；默认：2
                              w: 300,                //（可选项）数字类型；对话框的宽；默认：300
                              title:{                //（可选项）JSON对象；弹窗标题栏样式配置，不传则不显示标题区域
                                  marginT: 20,       //（可选项）数字类型；标题栏与对话框顶端间距；默认：20
                                  icon: 'widget://image/app/dialogBoxTisi.jpg',          //（可选项）字符串类型；标题前面的图标路径，要求本地路径（widget://、fs://）；图片为正方形的，如：50*50、100*100，建议开发者传大小合适的图片以适配高分辨率手机屏幕，不传则不显示
                                  iconSize: 80,      //（可选项）数字类型；icon 图标边长大小,若 icon 不存在则此参数无效；默认：24
                                  titleSize: 14,     //（可选项）数字类型；标题字体大小；默认：14
                                  titleColor: '#000' //（可选项）字符串类型；标题字体颜色，支持#、rgb、rgba；默认：#fff
                              },
                              content:{              //（可选项）JSON 对象；文本内容配置，若不传则不显示该区域
                                  marginT: 20,       //（可选项）数字类型；内容文本顶端与标题栏底端的距离，如果标题栏不存在，则是到窗口顶端的距离；默认：20
                                  marginB: 40,       //（可选项）数字类型；内容文本底端与 left/right 顶端的距离，如果 left/right 都不存在，则是到对话框底端的距离；默认：20
                                  color: '#ff0103',     //（可选项）字符串类型；内容文本字体颜色，支持 rgb、rgba、#；默认：#eee
                                  size: 12           //（可选项）数字类型：内容文本字体大小；默认：12
                              },
                              left:{                 //（可选项）JSON 对象；左边按钮样式配置，不传则不显示左边按钮
                                  marginB: 30,        //（可选项）数字类型；左边按钮的下边距；默认：7
                                  marginL: 30,       //（可选项）数字类型；左边按钮的左边距；默认：20
                                  w: 100,            //（可选项）数字类型；左边按钮的宽；默认：130
                                  h: 40,             //（可选项）数字类型；左边按钮的高；默认：35
                                  corner: 10,         //（可选项）数字类型；左边按钮圆角半径；默认：0.0
                                  bg: '#3d3d3d',        //（可选项）字符串类型；左边按钮的背景，支持rgb、rgba、#、img；默认：'#e0e'
                                  color: '#fff',  //（可选项）字符串类型；左边按钮标题字体颜色，支持rgb，rgba、#；默认：'#007FFF'
                                  size: 12           //（可选项）数字类型；左边按钮标题字体大小；默认：12
                              },
                              right: {               //（可选项）JSON 对象；右边按钮样式配置，不传则不显示右边按钮
                                  marginB: 30,        //（可选项）数字类型；右边按钮的下边距；默认：7
                                  marginL: 40,      //（可选项）数字类型；右边按钮左边距；默认：10
                                  w: 100,            //（可选项）数字类型；右边按钮的宽；默认：130
                                  h: 40,             //（可选项）数字类型；右边按钮的高；默认：35
                                  corner: 10,         //（可选项）数字类型；右边按钮圆角半径；默认：0.0
                                  bg: '#ff0103',        //（可选项）字符串类型；右边按钮的背景，支持rgb、rgba、#、img；默认：'#e0e'
                                  color: '#fff',  //（可选项）字符串类型；右边按钮标题字体颜色，支持rgb、rgba、#；默认：'#007FFF'
                                  size: 12           //（可选项）数字类型；右边按钮标题字体大小；默认：12
                              }
                          }
                                }, function(ret) {
                                    if (ret.eventType == 'left') {
                                        var dialogBox = api.require('dialogBox');
                                        dialogBox.close({
                                            dialogName: 'alert'
                                        });
                                    }else if (ret.eventType == 'right') {


                                      var openset = api.require('openSet');
                                      openset.open({
                                          id: 1
                                      });


                                      var dialogBox = api.require('dialogBox');
                                      dialogBox.close({
                                          dialogName: 'alert'
                                      });
                                    }
                                });
                      /*    无网络弹窗提示结束    */

    }
//////////////////////    网络连接错误提示 方法 NetworkConnectionFailurePrompt  E  //////////////////////

//////////////////////    报错按钮打开 方法 baocuo  S  //////////////////////
    function baocuo(){

          api.toast({
              msg: '开发中'
          });
    }
//////////////////////    报错按钮打开 方法 baocuo  E  //////////////////////



</script>
</html>
